<script setup lang="ts">

import CrudTable from '@/components/crud/table/CrudTable.vue';
import {ComponentAttrs, DetailConfig, FilterCondition, FormConfig} from '@/components/crud/types';
import {createCrudTableColumn} from "@/components/crud/CrudTableColumn";
import {ref} from "vue";

const formConfig: FormConfig[] = [
  {
    title: '姓名',
    field: 'title',
    rules: [
      {required: true, message: '请输入姓名', trigger: 'blur'},
    ],
    component: {
      name: 'el-input',
      width: 100,
      attrs: {
        placeholder: '请输入姓名',
      },
    },
  },
  {
    title: '年龄',
    field: 'age',
    defaultValue: 18,
     component: {
       name: 'el-input-number',
       width: 180,
       attrs: {step:1}
     }
  },
  {
    title: 'E-MAil',
    field: 'email',
    rules: [
      {required: true, message: '请输入姓名', trigger: 'blur'},
      { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }
    ],
    component: {
      name: 'el-input',
      width: 180,
      attrs: {
        placeholder: '请输入邮箱',
      }
    }
  }
];
const filterConfig: FilterCondition[] = [
  {
    field: 'title',
    title: '姓名',
    operator: '$contains',
    value: '',
    component: {
      name: 'el-input',
      attrs: {
        placeholder: '请输入姓名',
      }
    }
  },
]
const detailOptions: DetailConfig[] = [
  {
    title: '姓名',
    field: 'title',
  },
  {
    title: '年龄',
    field: 'age',
  },
  {
    title: 'E-Mail',
    field: 'email',
  }
]
const columns = ref([
  createCrudTableColumn({
    field: 'title',
    title: '姓名',
    width: 150,
  }),
  createCrudTableColumn({
    field: 'age',
    title: '年龄',
    width: 80,
  }),
  createCrudTableColumn({
    field: 'email',
    title: '邮箱',
  })
])
</script>

<template>
  <crud-table
      url="tests"
      :columns="columns"
      :update-config="formConfig"
      :create-config="formConfig"
      :detail-options="detailOptions"
      :filter-options="filterConfig"/>
</template>

<style scoped>

</style>
